<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校验签核</title>
    <link rel="icon" href="__PUBLIC__/images/compallogo.png" type="image/x-icon">
    <link rel="stylesheet" href='__PUBLIC__/css/bootstrap.min.css'>
    <link rel="stylesheet" href="__PUBLIC__/css/layui.css">
    <link rel="stylesheet" href="__PUBLIC__/css/index.css">
    <link rel="stylesheet" href="__PUBLIC__/css/mui.min.css">
    <script type="text/javascript" src="__PUBLIC__/js/mui/mui.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/mui/mui.zoom.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/mui/mui.previewimage.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/layui.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/element.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/vue.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/vue-resource.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
   .layui-table-header table thead th {
        background-color:#F4987F;
   }
   #app table th{
       font-size:14px;
       font-weight:110;
   }
   #app a{
       color:blue;
     
   }


   [v-cloak] { display: none!important;;}

   .mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			.mui-preview-loading.mui-active {
				display: block;
			}
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}

    .layui-upload-img {
                width:  62px;
                height: 62px;
                margin:5px auto;
    }
    .yw{
        background-color: rgb(247, 243, 22);
    }
    .gn{
        background-color:#00ff00;
    }

</style>
<body style="background-color: #ccc;">
    <ul class="layui-nav" lay-filter="">

        <li class="layui-nav-item "><a href="#" style="font-size: 20px;text-decoration: none">Compal SOD Software Management System</a></li>
    
        <li class="layui-nav-item">
            <a href="{:url('Equipment/pendlist')}" onclick="" >未结案清单<span class="layui-badge">{$pcount}</span></a>
        </li>
        <li class="layui-nav-item">
            <a href="{:url('Equipment/endlist')}">已结案清单<span class="layui-badge">{$ocount}</span></a>
        </li>
    
    
        <ul class="layui-nav layui-layout-right" lay-filter="">
            <li class="layui-nav-item" >
                <a href=""><img src="/tp5/public/static/images/tx.jpg" class="layui-nav-img">{$Think.session.username}</a>
                <dl class="layui-nav-child">
                    <dd><a href="{:url('index/login')}">退了</a></dd>
                </dl>
            </li>
        </ul>
    </ul>
   
    <div style="width: 1155px;margin-left: 50%;transform: translateX(-50%);margin-top: 50px;">
        <table id='info'></table>
    </div>

    <div id="app" style="width: 1155px;margin-left: 50%;transform: translateX(-50%);margin-top: 100px;background-color: rgb(196, 84, 84);height: 200px;">
        <table class="table table-bordered table-condensed" style="margin-top:100px;text-align:center; background-color:#FFF;height: 250px;" id="step-tb">
            <tbody>
            <tr style="background-color:#F4987F">
                <th>Actvity</th>
                <th>Attach</th>
                <th>Begingtime</th>
                <th>Owner</th>
                <th>remark</th>
                <th>Endtime</th>
                <th>Status</th>
            </tr>
            <tr >
                <td style='border-right: 0px;height:50px' colspan="1">仪器校验流程</td>
            </tr>
            <tr>
                <td>仪器负责人拿到仪器签字后拍照上传到系统</td>
                <td><img v-cloak v-show="imgs.img1.flag" :src = "imgs.img1.path" class="layui-upload-img" data-preview-src="" data-preview-group="1" id="demo1" /></td>
                <td v-cloak>{{ arr.itime}}</td>
                <td v-cloak><a href="javascript:void(0)" @click="poplayer(arr.incharge,arr.id,1)">{{ arr.custodian}}</a></td>
                <td v-cloak>{{ arr.memo1==''||arr.memo1==null ? '' : arr.memo1}}</td>
                <td v-cloak>{{ arr.etime1==''||arr.etime1==null ? '' : arr.etime1}}</td>
                <td v-cloak :class="arr.step1==0||arr.step1==undefined||arr.step1=='' ? 'yw' : 'gn'">{{ arr.step1==0||arr.step1==undefined||arr.step1=='' ? '待签核' : '签核完毕'}}</td>
            </tr>
            <tr>
                <td>校验完毕并且通知保管人取仪器并签字上传系统</td>
                <td><img v-cloak v-show="imgs.img2.flag" :src = "imgs.img2.path"  class="layui-upload-img" data-preview-src="" data-preview-group="1" id="demo1" /></td>
                <td v-cloak>{{  arr.etime1==''||arr.etime1==null ? '' : arr.etime1}}</td>
                <td v-cloak><a href="javascript:void(0)" @click="poplayer('all',arr.id,2)">{{ arr.incharge}}</a></td>
                <td v-cloak>{{ arr.memo2==''||arr.memo2==null ? '' : arr.memo2}}</td>
                <td v-cloak>{{ arr.etime2==''||arr.etime2==null ? '' : arr.etime2}}</td>
                <td v-cloak :class="arr.step2==0||arr.step2==undefined||arr.step2=='' ? 'yw' : 'gn'" >{{ arr.step2==0||arr.step2==undefined||arr.step2=='' ? '待签核' : '签核完毕'}}</td>
            </tr>
            </tbody>
            </table>
    </div>

</body>
<script type="text/javascript">
    Vue.config.devtools = true;
    mui.previewImage();
    
    layui.use('element', function(){
        let element = layui.element;
        element.init();
    });
    let urlparam = window.location.search.substr(1).split('=');

    layui.use('table',function(){
        let table = layui.table;
        table.render({
            elem:'#info',
            url:'{:url("Equipment/getinfobyid")}',
            where:{id:urlparam[1]},
            cols: [[
            {field: 'name',  title: '儀器名稱',edit:'text' },
            {field: 'model',  title: '型号',edit:'text' },
            {field: 'brand',  title: '厂牌',edit:'text' },
            {field: 'plant',  title: '厂区',edit:'text' },
            {field: 'dept',  title: '部门',edit:'text' },
            {field: 'checktype',  title: '校验性质',edit:'text' },
            {field: 'custodian',  title: '保管人',edit:'text' },
            {field: 'incharge',  title: '负责人',edit:'text' },
            {field: 'director1',  title: '保管人主管',edit:'text' },
            {field: 'checkdata',  title: '校验日期',edit:'text' },
            ]],
            skin:'nob',
        })
    })
    

    let vm = new Vue({ //vue.js 文档：https://cn.vuejs.org/v2/guide/
        el:'#app',
        data:{
            arr:{},
            imgs:{
                'img1':{path:'',flag:false},
                'img2':{path:'',flag:false}
            },
           
        },
        created() {
            this.getinfo()
            this.getimgs()
            // mui('body').on( 'tap' , 'a' , function(){ //mui.previewImage(); 使用mui的图片预览后，页面的a链接会失效，加上这段代码可以恢复跳转！！！
            //     document.location.href=this.href;
            // })
        },
        // watch:{
        //     'arr':function(newval,oldval){
                
        //     }
        // },
        methods:{ //定义的函数都放在methods 中
            async  getinfo(){
                await  axios({
                    headers: {'Content-Type': 'application/json;charset=UTF-8'},
                    method:'post',
                    url:'{:url("Equipment/getinfobyid")}',
                    params:{id:urlparam[1]},
                }).then(res=>{ //这里必须用箭头函数 
                       if(res.data.code==0){
                         this.arr = res.data.data[0]
                         console.log(this.arr)
                       }
                    })
            },
            poplayer(e,f,g){
                let self = this;
                window.p = e;
                window.id = f;
                window.step = g;
                layui.use('layer', function(){
                    let layer = layui.layer
                    layer.ready(function () {
                        layer.open({
                            type: 2,
                            title: '校验流程签核',
                            maxmin: true,
                            shadeClose: true,
                            area: ['900px', '350px'],
                            content: "{:url('equipment/popsignlayer')}",
                            btn: ['確定', '关闭'],
                            yes: function (index,layero) {
                                
                                let body = layer.getChildFrame('body', index)
                                let t = body.find('textarea').val() //memo val

                                if (t !== '') {
                                    axios({
                                        headers: { 'Content-Type': 'application/json;charset=UTF-8' },
                                        method: 'post',
                                        url: '{:url("Equipment/update_ep")}',
                                        params: { id:f, memo:t, step:g , rec:e },
                                    }).then(res=>{
                                        console.log(res);
                                        // if(res.status==200 ){
                                        //     layer.msg('签核ok',{time:1500,icon:1},function(){
                                        //         layer.close(index);
                                        //     })
                                        // }
                                    })
                                        return false;
                                }

                             
                            }


                        })

                    })
                    
                })
            },
            async getimgs(){
                await  axios({
                    headers: {'Content-Type': 'application/json;charset=UTF-8'},
                    method:'post',
                    url:'{:url("Equipment/getImgpathById")}',
                    params:{id:urlparam[1]},
                }).then(res=>{ //这里必须用箭头函数 
                        if (res.status == 200) {
                        if ((typeof res.data) !== 'string') {
                            let obj = res.data[0];
                            //console.log(typeof res.data)
                            let keys = Object.keys(obj);
                            for (let i = 0; i < keys.length; i++) {
                                if (obj[keys[i]] !== null && obj[keys[i]] !== '') { //如果这步已经签过，那就将图片展示在table中
                                    let kimg = 'img' + parseInt(i + 1);
                                    (this.imgs)[kimg].path = obj[keys[i]];
                                    (this.imgs)[kimg].flag = true;
                                }
                            }
                        }
                    }
                    })
            }
        },

    })
    
   
</script>
</html>